<template>
	<view class="mine-container" :style="{height: `${windowHeight}px`}">
		<view class="header-section">
			<view class="flex padding justify-between">
				<!-- <view class="uni-textarea">
					<textarea v-model="value" name="search" class="textarea" @blur="bindTextAreaBlur" placeholder="搜索订单"
						placeholder-style="font-size:17px;" style="background-color: white;"></textarea>
				</view>
				<uni-icons type="search" size="35" class="search-icon"></uni-icons> -->
			</view>
		</view>
		<!-- 分类选择 -->
		<scroll-view class="categories" scroll-x="true">
			<view class="category-item" :class="{ 'active-category': selectedCategory === category }"
				v-for="category in categories" :key="category" @click="selectCategory(category)">
				{{ category }}
			</view>
		</scroll-view>
		<!-- 内容 -->
		<view class="content-section">
			<view v-if="filteredOrderList.length === 0" class="empty-container">
				<image src="@/static/images/null.jpg" class="null-picture" />
				<view class="null-text">您还没有相关的订单</view>
				<view class="null-text">可以去看看有哪些想买的</view>
			</view>
			<view v-if="filteredOrderList.length > 0" class="order-list">
				<view class="flex padding justify-between" style="background-color:rgb(241, 241, 241)">
					<view class="order-list">
						<view v-for="order in filteredOrderList" :key="order.orderId" class="order-item">
							<!-- 显示订单信息的代码 -->
							<uni-card>
								<view class="flex align-center" @click="handleclickPicture(getItemById(order.itemId).productId)">
									<image
										:src="baseUrl+getProductById(getItemById(order.itemId).productId).productLogo"
										mode="aspectFill" :style="{ width: '100px', height: '100px' }"></image>
									<text class="product-name">
										{{ getProductById(getItemById(order.itemId).productId).productName }}</text>
									<text class="product-spec">规格：{{ getItemById(order.itemId).specName }}</text>
									<text class="product-spec">实付款： {{ getItemById(order.itemId).specValue * getItemById(order.itemId).productCnt }}</text>
								</view>
								<!--付款页面付款按钮-->
								<view v-if="selectedCategory==='待付款'" @click="pay">
									<button class="operation-Comment" @click="toPay(order)">付款</button>
								</view>
								<view v-if="selectedCategory === '待发货' || selectedCategory === '待收货'" >
									<button class="operation-Comment" @click="refund(order)">申请售后</button>
								</view>
								<!--评价页面评价按钮-->
								<view v-if="selectedCategory==='待评价'" class="opComment">
									<button class="operation-Comment" @click="addComment(order)">评价</button>
								</view>
							</uni-card>
							<!-- 其他订单信息 -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--弹框-->
		<uni-popup ref="commentPopup" type="dialog">
			<view class="comment-popup">
				<view class="form-field">
					<text>商品名称: {{ currentOrder && getProductById(getItemById(currentOrder.itemId).productId).productName }}</text>
				</view>
				<view class="form-field">
					<text>评分:</text>
					<view class="rating">
						<span v-for="star in 5" :key="star" @click="commentRating = star">
							<i :class="star <= commentRating ? 'star-filled' : 'star-empty'">★</i>
						</span>
					</view>
				</view>
				<view class="form-field">
					<text>评论:</text>
					<textarea v-model="commentText" class="comment-textarea" placeholder="请输入评论"></textarea>
				</view>
				<view class="form-buttons">
					<button @click="submitComment">确认</button>
					<button @click="cancelComment">取消</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="alertDialog" type="dialog">
		  <uni-popup-dialog
		    :type="msgType"
		    cancelText="关闭"
		    title="成功"
		    content="付款成功!!"
		    :confirmText="''"
		    @close="dialogClose"
		  ></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="refundDialog" type="dialog">
		  <uni-popup-dialog
		    :type="msgType"
		    cancelText="关闭"
		    title="成功"
		    content="申请售后成功!!"
		    :confirmText="''"
		    @close="refundClose"
		  ></uni-popup-dialog>
		</uni-popup>
		
	</view>
</template>

<script>
	import {
		getItemList,
		getOrderList,
		AddComment
	} from '../../../api/cart';
	import {
		getProductList
	} from '../../../api/login';
	import config from '@/config';
	const baseUrl = config.baseUrl
	export default {
		data() {
			return {
				baseUrl:'',
				value: '',
				orderList: [],
				categories: ["我的订单", "待付款", "待发货", "待收货", "待评价", "退款"],
				selectedCategory: '我的订单',
				orderStausInfo: {
					paymentStatus: '',
					orderStatus: '',
				},
				items: [],
				products: [], // 假设这是一个包含了所有product的对象数组
				commentFormVisible: false,
				currentOrder: null,
				commentRating: 0,
				commentText: '',
				productId:'',
				msgType:'',
			}
		},
		computed: {
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50;
			},
			filteredOrderList() {
				if (this.selectedCategory === '我的订单' || this.selectedCategory === '') {
					console.log(this.orderList);
					return this.orderList;
				}
				return this.orderList.filter(order => order.orderStatus === this.selectedCategory);
			},
		},
		created() {
			this.baseUrl = baseUrl;
			this.getAllOrder();
			Promise.all([getItemList(), getProductList()]).then(results => {
				console.log(results);
				this.items = results[0].data; // 假设第一个API返回的数据结构是 { data: [...items] }
				console.log(this.items);
				this.products = results[1].data.rows; // 假设第二个API返回的数据结构是 { data: [...products] }
				console.log(this.products);
			});

		},
		methods: {
			selectCategory(category) {
				this.selectedCategory = category;
			},
			getAllOrder() {
				getOrderList(this.orderStausInfo).then(res => {
					this.orderList = res.data.rows;
					console.log(res.data);
				})
			},
			handleclickPicture(productId){
				this.$tab.navigateTo('/pages/category/ProductDetail/ProductDetail?productId='+productId);
				
			},
			getItemById(itemId) {
				// 假设items数组中的每个对象都有一个itemId属性
				return this.items.find(item => item.itemId === itemId);
			},
			getProductById(productId) {
				// 假设products数组中的每个对象都有一个productId属性
				return this.products.find(product => product.productId === productId);
			},
			addComment(order) {
				this.currentOrder = order;
				this.productId = this.getItemById(this.currentOrder.itemId).productId;
				this.$refs.commentPopup.open();
			},
			toPay(order) {
				this.currentOrder=order;
				this.productId = this.getItemById(this.currentOrder.itemId).productId;
				this.$refs.alertDialog.open();
			},
			refund(order){
				this.currentOrder=order;
				this.productId = this.getItemById(this.currentOrder.itemId).productId;
				this.$refs.refundDialog.open();
			},
			refundClose(){
				this.$refs.refundDialog.close();
			},
			dialogClose(){
				this.$refs.alertDialog.close();
			},
			submitComment() {
				const commentData = {
					orderId: this.currentOrder.orderId,
					userId: this.currentOrder.userId,
					productId:this.productId,
					userRating: this.commentRating,
					userComment: this.commentText,
				};
				console.log(commentData);
				 //假设我们有一个API endpoint来处理评论提交
				 AddComment(commentData).then(response => {
					 
				 	this.$refs.commentPopup.close();
				 	this.commentText = '';
				 	this.commentRating = 0;
				 	console.log('Comment submitted:', response);
				 });
				/* console.log('Comment submitted:', commentData); // 模拟提交评论
				this.$refs.commentPopup.close();
				this.commentText = '';
				this.commentRating = 0; */
			},
			cancelComment() {
				this.$refs.commentPopup.close();
				this.commentText = '';
				this.commentRating = 0;
			},
		},

		onload(option) {
			if (option.category) {
				this.selectedCategory = options.category;
			}
		}
	}
</script>

<style scoped>
    .mine-container {}

    .header-section {
        position: sticky;
        width: 100%;
        padding: 10px;
        background-color: #fff;
        z-index: 9;
    }

    .uni-textarea {
        flex: 1;
        display: flex;
        align-items: center;
        margin-right: 10px;
    }

    .textarea {
        width: 100%;
        height: 40px;
        padding-left: 10px;
        padding-top: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
    }

    .search-icon {
        align-self: center;
        color: #333;
    }

    .NULL_picture {
        width: 100px;
        height: 100px;
    }

    .content-section {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        width: 100%;
        margin-top: 10px;
    }

    .empty-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .null-picture {
        width: 100px;
        height: 100px;
        margin-bottom: 10px;
    }

    .null-text {
        font-size: 16px;
        color: #999;
        margin-top: 5px;
    }

    .categories {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding: 10px;
        background-color: #fff;
        overflow-x: auto;
        white-space: nowrap;
    }

    .category-item {
        display: inline-block;
        padding: 10px;
        font-size: 18px;
        color: #333;
        cursor: pointer;
        white-space: nowrap;
    }

    .category-item.active-category {
        color: white;
        background-color: #3c96f3;
        border-radius: 5px;
    }

    .order-item {
        width: 100%;
        background-color: #ffeadb;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        margin-bottom: 10px;
    }

    .product-name {
        font-size: 16px;
        margin-right: 10px;
    }

    .product-spec {
        font-size: 14px;
        margin-right: 10px;
    }

    .comment-popup {
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    .form-field {
        margin-bottom: 15px;
		width:300px;
    }

    .form-field text {
        display: block;
        font-size: 16px;
        color: #333;
        margin-bottom: 5px;
    }

    .rating {
        display: flex;
        font-size: 24px;
    }

    .star-filled {
        color: #ffcc00;
        cursor: pointer;
    }

    .star-empty {
        color: #ccc;
        cursor: pointer;
    }

    .comment-textarea {
        width: calc(100% - 20px);
        height: 70px;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 10px;
        box-sizing: border-box;
        font-size: 16px;
        resize: none;
    }

    .form-buttons {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }

    .form-buttons button {
        width: 45%;
        padding: 10px 0;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
    }

    .form-buttons button:first-child {
        background-color: #f0f0f0;
        color: #333;
    }

    .form-buttons button:last-child {
        background-color: #3c96f3;
        color: white;
    }
</style>
